﻿@model List<OnlineEducation.Data.Entities.TeachingPlan>
@{
    ViewData["Title"] = "主页";
    Layout = "_Layout_Front";
}

<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">/</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                @*<h4 class="page-title">我的课程</h4>*@
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-12">

            <p class="sub-header">我们提供的课程.</p>

            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleFade" data-slide-to="1"></li>
                    <li data-target="#carouselExampleFade" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="~/assets/images/front_image/1.jpg" alt="First slide" />
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="text-white">First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="~/assets/images/front_image/1.jpg" alt="Second slide" />
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="text-white">Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="~/assets/images/front_image/2.jpg" alt="Third slide" />
                        <div class="carousel-caption d-none d-md-block">
                            <h3 class="text-white">Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>


    <!-- end page title -->
    <div class="row mb-0 mt-2">

        <div class="col-sm-12">
            <div class="text-sm-right">
                <div class="btn-group mb-3">
                    <button type="button" class="btn btn-primary">全部</button>
                </div>
                <div class="btn-group mb-3 ml-1">
                    <button type="button" class="btn btn-light">进行中</button>
                    <button type="button" class="btn btn-light">关闭的</button>
                </div>

                <div class="btn-group mb-3 ml-2 d-none d-sm-inline-block">
                    <button type="button" class="btn btn-dark"><i class="mdi mdi-apps"></i></button>
                </div>
                <div class="btn-group mb-3 d-none d-sm-inline-block">
                    <button type="button" class="btn btn-link text-dark"><i class="mdi mdi-format-list-bulleted-type"></i></button>
                </div>
            </div>
        </div><!-- end col-->
    </div>
    <!-- end row-->

    @for (int i = 0; i < Model.Count / 3 + 1; i++)
    {

        <div class="row">
            @{
                var threes = Model.Skip((i % 3) * 3).Take(3);


                foreach (var item in threes)
                {
                    if (item != null)
                    {
                        <div class="col-xl-4">
                            <div class="card-box project-box">
                                <div class="dropdown float-right">
                                    <a href="apps-projects.html#" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false">
                                        <i class="mdi mdi-dots-horizontal m-0 text-muted h3"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-left">
                                        <a class="dropdown-item" href="apps-projects.html#">Edit</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Delete</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Add Members</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Add Due Date</a>
                                    </div>
                                </div> <!-- end dropdown -->
                                <!-- Title-->

                                <h4 class="mt-0"><a href="javascript: void(0);" class="text-dark">New Admin Design</a></h4>
                                <p class="text-muted text-uppercase"><i class="mdi mdi-subtitles-outline"></i> <small>Orange Limited</small></p>
                                <div class="badge bg-soft-success text-success mb-2">Finished</div>

                                <!-- Desc-->
                                <p class="text-muted font-13 mb-2 sp-line-2">
                                    With supporting text below as a natural lead-in to additional contenposuere erat a
                                    ante...<a href="javascript:void(0);" class="font-weight-bold text-muted">view more</a>
                                </p>
                                <div>
                                    <span>授课教师</span>
                                </div>

                                <!-- Team-->
                                <div class="avatar-group mb-0">

                                    <a href="javascript: void(0);" class="avatar-group-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="timmy">
                                        <img src="~/assets/images/users/user-1.jpg" class="rounded-circle avatar-sm" alt="friend" />
                                    </a>

                                    <a href="javascript: void(0);" class="avatar-group-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty">
                                        <img src="~/assets/images/users/user-7.jpg" class="rounded-circle avatar-sm" alt="friend" />
                                    </a>
                                </div>
                                <!-- Task info-->
                                <p class="mb-1">
                                    <span class="text-nowrap mb-2 d-inline-block">
                                        <i class="fa fa-user-alt text-muted"></i>
                                        <b>214</b> 学员
                                    </span>
                                    <span class="pr-2 text-nowrap mb-2 d-inline-block">
                                        <i class="mdi mdi-format-list-bulleted-type text-muted"></i>
                                        <b>78</b> 课时
                                    </span>

                                    <span class="text-nowrap mb-2 d-inline-block">
                                        <i class="mdi mdi-comment-multiple-outline text-muted"></i>
                                        <b>214</b> 评论
                                    </span>
                                </p>

                                <!-- Progress-->
                                <p class="mb-2 font-weight-bold">学习进度: <span class="float-right">28/78</span></p>
                                <div class="progress mb-1" style="height: 7px;">
                                    <div class="progress-bar"
                                         role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"
                                         style="width: 34%;">
                                    </div><!-- /.progress-bar .progress-bar-danger -->
                                </div><!-- /.progress .no-rounded -->

                            </div> <!-- end card box-->
                        </div><!-- end col-->
                        <div class="col-xl-4">
                            <div class="card-box project-box">
                                <div class="dropdown float-right">
                                    <a href="apps-projects.html#" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false">
                                        <i class="mdi mdi-dots-horizontal m-0 text-muted h3"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-left">
                                        <a class="dropdown-item" href="apps-projects.html#">Edit</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Delete</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Add Members</a>
                                        <a class="dropdown-item" href="apps-projects.html#">Add Due Date</a>
                                    </div>
                                </div> <!-- end dropdown -->
                                <!-- Title-->

                                <h4 class="mt-0"><a href="javascript: void(0);" class="text-dark">New Admin Design</a></h4>
                                <p class="text-muted text-uppercase"><i class="mdi mdi-subtitles-outline"></i> <small>Orange Limited</small></p>
                                <div class="badge bg-soft-success text-success mb-2">Finished</div>

                                <!-- Desc-->
                                <p class="text-muted font-13 mb-2 sp-line-2">
                                    With supporting text below as a natural lead-in to additional contenposuere erat a
                                    ante...<a href="javascript:void(0);" class="font-weight-bold text-muted">view more</a>
                                </p>
                                <div>
                                    <span>授课教师</span>
                                </div>

                                <!-- Team-->
                                <div class="avatar-group mb-0">

                                    <a href="javascript: void(0);" class="avatar-group-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="timmy">
                                        <img src="~/assets/images/users/user-1.jpg" class="rounded-circle avatar-sm" alt="friend" />
                                    </a>

                                    <a href="javascript: void(0);" class="avatar-group-item" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty">
                                        <img src="~/assets/images/users/user-7.jpg" class="rounded-circle avatar-sm" alt="friend" />
                                    </a>
                                </div>
                                <!-- Task info-->
                                <p class="mb-1">
                                    <span class="text-nowrap mb-2 d-inline-block">
                                        <i class="fa fa-user-alt text-muted"></i>
                                        <b>214</b> 学员
                                    </span>
                                    <span class="pr-2 text-nowrap mb-2 d-inline-block">
                                        <i class="mdi mdi-format-list-bulleted-type text-muted"></i>
                                        <b>78</b> 课时
                                    </span>

                                    <span class="text-nowrap mb-2 d-inline-block">
                                        <i class="mdi mdi-comment-multiple-outline text-muted"></i>
                                        <b>214</b> 评论
                                    </span>
                                </p>

                                <!-- Progress-->
                                <p class="mb-2 font-weight-bold">学习进度: <span class="float-right">28/78</span></p>
                                <div class="progress mb-1" style="height: 7px;">
                                    <div class="progress-bar"
                                         role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"
                                         style="width: 34%;">
                                    </div><!-- /.progress-bar .progress-bar-danger -->
                                </div><!-- /.progress .no-rounded -->

                            </div> <!-- end card box-->
                        </div><!-- end col-->
                    }
                }

            }
        </div>
        <!-- end row -->

    }

    <!-- end row -->

    <div class="row">
        <div class="col-12">
            <div class="text-center mb-3">
                <a href="javascript:void(0);" class="text-danger"><i class="mdi mdi-spin mdi-loading mr-1"></i> Load more </a>
            </div>
        </div> <!-- end col-->
    </div>


    <!-- end row -->

</div>
<div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div><!-- /.modal -->
@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>

    <script>


        var table;

        $(function () {

            table = $('#datatable').DataTable({
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，没有匹配的数据",
                    "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                    "sInfoEmpty": "没有匹配的数据",
                    "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                    "sProcessing": "正在加载中...",
                    "sSearch": "全文搜索：",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                },
                language: {
                    paginate:
                        { previous: "<i class='mdi mdi-chevron-left'>", next: "<i class='mdi mdi-chevron-right'>" }
                },
                drawCallback: function () { $(".dataTables_paginate > .pagination").addClass("pagination-rounded") },

                "responsive": true,
                "lengthChange": true,
                "searching": true,
                "order": [[0, 'desc']],
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [1, 2, 3, 4, 5, 6] }],
                "serverSide": false,
                //ajax: {
                //    url: '/Student/GetAll',
                //    type: 'POST',
                //    async: true,
                //    //headers: {
                //    //    "XSRF-TOKEN": document.querySelector('[name="__RequestVerificationToken"]').value
                //    //},
                //    data: function (data) {

                //        return {
                //            param: data
                //        };
                //    }
                //},

                //columns: [
                //    {
                //        title: "用户名",
                //        data: "UserName",
                //        name: "UserName",

                //    },
                //    {
                //        title: "邮箱",
                //        data: "Email",
                //        name: "Email"
                //    },
                //    {
                //        title: "手机",
                //        data: "PhoneNumber",
                //        name: "PhoneNumber"
                //    },
                //    {
                //        title: "状态",
                //        data: "Status",
                //        name: "Status",
                //        render: function (data, type, row) {

                //            if (data == 1) {
                //                return "<span class='badge badge-success'>正常</span>"
                //            }
                //            else {
                //                return "<span class='badge badge-dark'>锁定</span>"
                //            }
                //        }
                //    },
                //    {
                //        title: "建立日期",
                //        data: "CreatedTime",
                //        name: "CreatedTime",
                //        render: function (data, type, row) {
                //            return window.moment(data).format("YYYY-MM-DD HH:mm:ss");
                //        }
                //    },
                //    {
                //        title: "",
                //        data: null,
                //        name: null,
                //        render: function (data, type, row) {

                //            var html = "<div class='btn-group dropdown'>" +
                //                "<a href='javascript: void(0);' class='table-action-btn dropdown-toggle arrow-none btn btn-outline-secondary waves-effect btn-sm' data-toggle='dropdown' aria-expanded='false'><i class='ti-menu'></i></a>" +
                //                "<div class='dropdown-menu dropdown-menu-left'>" +
                //                "<a class='dropdown-item' href='#' onclick='ShowPopup(\"/Subject/AddEdit/" + row["ID"] + "\")'><i class='mdi mdi-pencil mr-2 text-muted font-18 vertical-middle'></i>修改</a>";

                //            if (row["Status"] == 1) {
                //                html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["ID"] + "\")'><i class='mdi mdi-playlist-remove mr-2 text-muted font-18 vertical-middle'></i>锁定</a>";
                //            } else {
                //                html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["ID"] + "\")'><i class='mdi mdi-check mr-2 text-muted font-18 vertical-middle'></i>解除锁定/a>";
                //            }
                //            html = html + "<a class='dropdown-item' href='#' onclick='UpdateStatus(\"" + row["ID"] + "\")'><i class='mdi mdi-check mr-2 text-muted font-18 vertical-middle'></i>修改密码/a>";
                //            html = html + "<a class='dropdown-item' href='#' onclick='Remove(\"" + row["ID"] + "\")'><i class='mdi mdi-delete-forever mr-2 text-muted font-18 vertical-middle'></i>删除</a></div></div>";

                //            return html;

                //        }
                //    }

                //]


            });
        });


        function ShowPopup(url) {
            var modalId = 'modalDefault';
            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
            $.get(url)
                .done(function (response) {
                    modalPlaceholder.html(response);
                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                }) ;
        }


        function SubmitForm(form, url) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {
                            popup.modal('hide');
                            ShowMessage(data.message);
                            setTimeout(function () {
                                window.location.href = "/Course/Index";
                            }, 2000);

                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });

            }
            return false;
        }

        function Remove(id) {


            Swal.fire({
                title: "删除",
                text: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dd4b39",
                confirmButtonText: "是的，删除!",
                cancelButtonText: "取消",

            }).then(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Course/Delete/' + id,
                    success: function (data) {
                        if (data.success) {
                            ShowMessage(data.message);
                            setTimeout(function () {
                                window.location.href = "/Course/Index";
                            }, 2000);
                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });
            });


        }

        function UpdateStatus(id) {

            $.ajax({
                type: 'POST',
                url: '/Course/ChangeStatus/' + id,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message);
                        setTimeout(function () {
                            window.location.href = "/Course/Index";
                        }, 2000);
                    } else {
                        ShowMessageError(data.message);
                    }
                } 
            });



        }
    </script>
}
